<template>
  <div class='zhuanti'>
    <header>
      <div>
        <router-link tag='button' to='/'>
          <button>＜</button>
        </router-link>
      </div>
      <div>专题</div>
      <div>···</div>
    </header>
    <div class='to' v-for='(item,index) in arr' :key='index' v-show='item.ID==id'>
      <img :src="item.img_src" alt="">
    </div>
      <ul class='zi'>
        <router-link tag='li' :to="'/zhuanti/'+id" exact>专题</router-link>
        <router-link tag='li' :to="'/zhuanti/'+id+'/hua'" exact>话题</router-link>
      </ul>
      <section>
        <router-view></router-view>
      </section>
      <footer>

      </footer>
    </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      id: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    axios
      .get("/api/menu/silderPage")
      .then(res => {
        this.arr = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style scoped lang='scss'>
ul li.active {
  color: #ff6668;
  border-bottom: 2px solid #ff6668;
}
html,
body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.zhuanti {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: calc(153rem / 67.5);
  background: #ff6668;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  div:nth-child(1) {
    button {
      outline: none;
      border: none;
      background: none;
      font-size: 26px;
      color: white;
    }
  }
  div:nth-child(3) {
    font-size: 26px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-right: calc(30rem / 67.5);
  }
}
.to {
  width: 100%;
  height: calc(382rem / 67.5);
  img {
    width: 100%;
    height: 100%;
  }
}
.zi {
  width: 100%;
  height: calc(150rem / 67.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  li:nth-child(1) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  li:nth-child(2) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
section {
  flex: 1;
  width: 100%;
  overflow: auto;
}
footer {
  width: 100%;
  height: calc(132rem / 67.5);
  background: #ff6668;
}
</style>


